<template>
	<view class="container">
		<u-cell title="主仓库:" required clickable :value="form.ZCK" :isLink="true" arrow-direction="down"
			@click="handleshow1('主仓库')"></u-cell>
		<u-cell title="经手人:" required clickable :value="form.JSR" :isLink="true" arrow-direction="down"
			@click="handleshow1('经手人')"></u-cell>
		<!-- 主仓库:<u--input placeholder="后置图标" suffixIcon="arrow-down" suffixIconStyle="color: #909399"></u--input> -->
		<u-picker immediateChange :show="show1" :columns="columns" keyName="name" @cancel="handleClose('主仓库')"
			@close="handleClose('主仓库')" @confirm="handleOkk"></u-picker>
		<u-picker immediateChange :show="show2" :columns="columns1" keyName="name" @cancel="handleClose('经手人')"
			@close="handleClose('经手人')" @confirm="handleOkk1"></u-picker>
		<view style="padding-top: 30rpx;">
			<u-button type="primary" text="扫码盘点" @click="handleSaoma"></u-button>
		</view>
		<view class="middle" v-if="!showList">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
		</view>
		<view class="middles" v-if="showList">
			<view class="" v-for="(item,index) in list" :key="index"
				style="border-bottom: 1px solid #ccc;padding-top: 20rpx;">
				<p style="width:100%;line-height: 60rpx;">
					<u-checkbox-group labelColor="#000" labelSize="31rpx" v-model="item.values" iconPlacement="right"  @change="checkboxChange1">
						<u-checkbox :name="item.SPQM" labelColor="#000" labelSize="31rpx" shape="square" :checked="item.value" activeColor="#2d8cf0"
							:label="'商品编码:'+item.SPBM" @change="radioChange1"></u-checkbox>
					</u-checkbox-group>
				</p>
				<p>商品全名:{{item.SPQM}}</p>
				<p style="display: flex;justify-content: space-between;"><span>库存数量:{{item.KCNum}}</span>
					<span>盘点数量:{{item.PDnum}}</span>
				</p>
			</view>
		</view>
		<view class="footer" v-if="showList">
			<view class="">
				<u-checkbox-group v-model="radiovalue1" placement="column" @change="groupChange">
					<u-checkbox shape="square" :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
						:key="index" :label="item.name" :name="item.name" @change="radioChange">
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="">
				合计数量{{Numbers}}
			</view>
			<view class="">
				<u-button type="primary" text="提交盘点" @click="submit"></u-button>
			</view>
		</view>
		<u-modal :show="showTan" :title="title" @confirm="showTan = false" :content='content'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
				showTan: false,
				showList: false,
				title: '警告',
				content: '请先选择主仓库',
				Numbers: 0,
				list: [
				],
				list1: [
					{
						SPBM: 'jp01410023644',
						SPQM: '南木戏子镜片',
						KCNum: 1,
						PDnum: 1,
						value: false,
						values:[],
						id:'0092402'
					},
					{
						SPBM: 'jp00110023634',
						SPQM: '明月优悦视',
						KCNum: 1,
						PDnum: 1,
						value: false,
						values:[],
						id:'0092427'
					},
					{
						SPBM: 'jp00110020000',
						SPQM: '测试',
						KCNum: 1,
						PDnum: 1,
						value: false,
						values:[],
						id:'0'
					},
				],
				form: {
					ZCK: '',
					JSR: ''
				},
				radiolist1: [{
					name: '全选',
					disabled: false
				}],
				radiolist: [],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				radiovalue: '苹果',
				columns: [
					[{
							name: '碑林区总店',
							value: '碑林区总店'
						},
						{
							name: '碑林区总店22',
							value: '碑林区总店22'
						}
					],

				],
				show2: false,
				columns1: [
					[{
						name: '赵三',
						value: '赵三'
					}, {
						name: '赵四',
						value: '赵四'
					}],

				],
			}
		},
		methods: {
			handleshow1(data) {
				data == '主仓库' ? this.show1 = true : this.show2 = true
				//选择完仓库根据对应仓库id查询出对应经手人下拉选择对应仓库经手人数据
				//id this.form.ZCK 
				//模拟请求接口
				if (this.form.ZCK == '碑林区总店') {
					this.columns1 = [
						[{
							name: '赵三',
							value: '赵三'
						}, {
							name: '赵四',
							value: '赵四'
						}]

					]
				} else {
					this.columns1 = [
						[{
							name: '王五',
							value: '王五'
						}, {
							name: '李四',
							value: '李四'
						}]

					]
				}
			},
			handleClose(data) {
				data == '主仓库' ? this.show1 = false : this.show2 = false
			},
			handleOkk(data) {
				console.log(data)
				this.form.ZCK = data.value[0].value
				this.show1 = false
			},
			handleOkk1(data) {
				console.log(data)
				this.form.JSR = data.value[0].value
				this.show2 = false
			},
			//计算合计数量
			getNumber(){
				this.Numbers = 0
				this.list.forEach(item=>{
					if(item.value){
						this.Numbers += item.KCNum
					}
				})
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			checkboxChange1(n){
				// console.log('222222222222222222', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
				if(n){
					this.list.forEach(item=>{
						item.value = true
					})
				} else {
					this.list.forEach(item=>{
						item.value = false
					})
				}
				console.log('1111', this.list);
				this.getNumber()
				this.$forceUpdate()
			},
			submit(){
				
			},
			radioChange1(n){
				console.log(n,this.list)
				this.Numbers = 0
				setTimeout(()=>{
					this.list.forEach(item=>{
						if(item.values.length>0){
							this.Numbers += item.KCNum
						}
					})
					this.$forceUpdate()
				},500)
			},
			handleSaoma() {
				let me = this
				!this.form.ZCK ? this.showTan = true : ''
				this.form.ZCK ? uni.scanCode({
					scanType: ['barCode'],
					success: function(res) {
						if (res.result) {
							me.list1.forEach(item=>{
								if(item.id == res.result){
									let index = 0
									if(me.list.length>0){
										me.list.forEach(it=>{
											if(it.SPQM == item.SPQM){
												it.KCNum +=1
												it.PDnum +=1
												index++
											}
										})
									}
									if(index == 0){
										me.list.push(item)
									}
								}
							})
							me.getNumber()
							me.showList1()
						}
					}
				}) : ''

			},
			showList1() {
				this.showList = true
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		box-sizing: border-box;

		.middle {
			height: 1030rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow-y: auto;
		}

		.middles {
			height: 1050rpx;
			width: 100%;
			padding-top: 20rpx;
			overflow-y: auto;
			font-size: 31rpx;

			p {
				line-height: 60rpx;
			}
		}

		.footer {
			display: flex;
			justify-content: space-around;
			align-items: baseline;
		}
	}

	.custom-stylea {
		background-color: #fff;
	}
</style>
<style>
	.u-checkbox-label--right {
		width: 100% !important;
		height: 60rpx !important;
	}
</style>
